<template>
	<div class="hot">
		<div class="hot-top">
			<span class="iconfont fire">&#xe6e7;</span>
			<label class="hot-til">本周热门榜单</label>
			<label style="float: right;">
				全部榜单
				<span class="iconfont">&#xe637;</span>
			</label>
		</div>
		<ul class="hot-list">
			<li class="hot-item" v-for="(item, index) in hotList" :key="item.id">
				
				<img :src="item.hotURL" />
				<p>{{item.hotTil}}</p>
				<p>
					<span>￥{{item.price}}</span>起
				</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		props:['hotList'],
		
	}
</script>

<style scoped>
	.hot {
		width: 100%;
		margin-top: 0.4rem;
		background-color: white;
		font-size: 0.28rem;
	}

	.hot-top {
		position: relative;
		padding: 0.2rem;
	}

	.fire {
		color: #ff4500 !important;
		font-size: 0.48rem;
		margin-right: 0.1rem;
	}

	.hot-til {
		color: #212121;
		font-weight: bold;
		font-size: 0.4rem;
	}

	.hot-all {
		display: inline-block;
		float: right;
		padding-top: 0.1rem;
		color: #616161;
	}

	.hot-list {
		margin-top: 0.2rem;
		padding-bottom: 0.4rem;
		/* 横向溢出滚动 */
		overflow-x: scroll;
		/* 纵向溢出隐藏 */
		overflow-y: hidden;
		white-space: nowrap;
		
	}

	.hot-item {
		width: 2rem;
		height: 2rem;
		padding: 0.2rem;
		display: inline-block;
	}

	.hot-item img {
		width: 100%;
		height: 100%;
	}
	.hot-item  p{
		text-align: center;
		margin-top: 0.1rem;
		overflow: hidden;
		white-space: nowrap; /*禁止文字换行   */
		text-overflow: ellipsis;
		
	}
</style>
